<template>

    <div class="root">
        <div class="one">特性与优点</div>
        <div v-for="(v,k,i) in data1" :key="i" class="two">
            <p class="head">{{v.a}}</p>
            <div class="img"><img src="https://angular.cn/generated/images/marketing/features/feature-icon.svg" alt=""> </div>
            <div class="three">
                <div v-for="(v,k,i) in v.h" :key="i" class="p">
                    <p>{{v.b}}</p>
                    <p>{{v.c}}</p>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Features",
        data: () => {
            return {
                data1: [{
                    a: "跨平台",
                    h: [{
                        b: "渐进式应用",
                        c: "充分利用现代 Web 平台的各种能力，提供 App 式体验。高性能、离线使用、免安装",
                    }, {
                        b: "原生",
                        c: "借助来自 Ionic、NativeScript 和 React Native 中的技术与思想，构建原生移动应用。",
                    }, {
                        b: "桌面",
                        c: "借助你已经在 Web 开发中学过的能力，结合访问原生操作系统 API 的能力，创造能在桌面环境下安装的应用，横跨 Mac、Windows 和 Linux 平台。",
                    },

                    ],
                }, {
                    a: "速度与性能",
                    h: [{
                        b: "代码生成",
                        c: "Angular 会把你的模板转换成代码，针对现代 JavaScript 虚拟机进行高度优化，轻松获得框架提供的高生产率，同时又能保留所有手写代码的优点。",
                    }, {
                        b: "统一平台",
                        c: "在服务端渲染应用的首屏，像只有 HTML 和 CSS 的页面那样几乎瞬间展现，支持 Node.js®、.NET、PHP，以及其它服务器，为通过 SEO 来优化站点铺平了道路。",
                    }, {
                        b: "代码拆分",
                        c: "借助新的组件路由器，Angular 可以实现快速加载。自动代码拆分机制可以让用户仅仅加载那些用于渲染所请求页面的代码。",
                    },

                    ],
                }, {
                    a: "生产率",
                    h: [{
                        b: "模板",
                        c: "通过简单而强大的模板语法，快速创建 UI 视图。",
                    }, {
                        b: "Angular CLI",
                        c: "命令行工具：快速进入构建环节、添加组件和测试，然后立即部署。",
                    }, {
                        b: "各种 IDE",
                        c: "在常用 IDE 和编辑器中获得智能代码补全、实时错误反馈及其它反馈等特性。",
                    },

                    ],
                }]
            }
        }
    }
</script>

<style scoped>
    .one {
        width: 100%;
        height: 50px;
        background-color: blue;
        /*padding: 20px;*/
        font-size: 20px;
        line-height: 50px;
        color: white;
        font-weight: bold;
    }

    .two {
        width: 80%;
        /*background-color: brown;*/
        margin: auto;

        padding-bottom: 10px;
        margin-top: 10px;

    }
    .three{
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .head {
        color: cornflowerblue;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 17px;
    }

    .img {
        text-align: center;

    }

    .img img {
        width: 70px;
        height: 70px;
    }

    .p {
        width: 25%;

        background-color: white;



    }

    .p p {
        padding: 5px;

    }
</style>